<template>
  <div class="eleRecord-dialog">
    <el-dialog :visible.sync="visible">
      <div class="panelWrap ele-container">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>电梯备案审核</div>
          <i class="el-icon-close" @click="handleCloseDialog" />
        </div>
        <div class="flexcenter m-t-30 m-b-30 ele-main">
          <!-- 左边 -->
          <div>
            <div class="con-content flex flexac">
              <span class="name">使用单位：</span>
              <el-input v-model="form.useUnitName" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name">使用场合：</span>
              <el-input v-model="form.usePlaceName" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name">电梯注册代码：</span>
              <el-input v-model="form.registerCode" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name">救援代码：</span>
              <el-input v-model="form.rescueCode" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name">安全员姓名：</span>
              <el-input v-model="form.securityPerson" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name">安全员联系电话：</span>
              <el-input v-model="form.securityPersonPhone" readonly class="input" />
            </div>

          </div>

          <!-- 右边 -->
          <div class="m-l-20">
            <div class="con-content flex flexac">
              <span class="name1">保养技术支持单位：</span>
              <el-input v-model="form.supportUnit" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name1">第一维保人姓名：</span>
              <el-input v-model="form.maintenancePerson1Name" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name1">第一维保人联系电话：</span>
              <el-input v-model="form.maintenancePerson1Phone" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name1">第二维保人姓名：</span>
              <el-input v-model="form.maintenancePerson2Name" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name1">第二维保人联系电话：</span>
              <el-input v-model="form.maintenancePerson2Phone" readonly class="input" />
            </div>

            <div class="con-content flex flexac">
              <span class="name1">安装地址：</span>
              <el-input v-model="form.installAddress" readonly class="input" />
            </div>
          </div>
        </div>
        <div class="flex footerBtn m-t-50 m-l-80 m-b-40">
          <!-- <el-button type="primary" class="btn el-icon-circle-check m-r-20" @click="handleSave">保 存</el-button> -->
          <!-- <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'EleRecordDialog',
  props: {
    value: {
      type: Boolean
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      form: { ...this.data }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      this.form = { ...v }
    }
  },
  methods: {
    handleCloseDialog() {
      this.visible = !this.visible
      this.$emit('handleRefresh')
      this.$emit('handleCloseDialog')
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/public.scss';
.eleRecord-dialog {
  .ele-container {
    width: 1000px;
    // min-height: 800px;
    margin-left: -300px;
    background: #ffffff;
    .ele-main {
      .con-content {
        margin-top: 20px;
        .name {
          width: 120px;
          text-align: right;
          margin-right: 10px;
        }
        .name1 {
          width: 160px;
          text-align: right;
          margin-right: 10px;
        }
        .input {
          width: 260px;
        }
      }
      .markinfo {
        justify-content: center;
      }
      .el-textarea__inner {
        padding: 5px 0;
      }
    }
    .footerBtn {
      justify-content: center;
      .btn {
        width: 100px;
      }
    }
  }
}
</style>
